<template>
  <span class="b5-show-icon">
    <svg-icon :icon-class="icon" :class-name="className" v-if="isSvgType" />
    <el-icon v-else :class="[className, 'b5-icon']"><component :is="icon" /></el-icon>
  </span>
</template>
<script setup name="IconShow">
  import { elIcons } from '../IconSelect/requireIcons'
  const props = defineProps({
    icon: String,
    className: String
  })

  const isSvgType = computed(() => {
    return !elIcons.includes(props.icon)
  })
</script>
<style lang="scss" scoped>
  .b5-show-icon {
    width: 1em;
    height: 1em;
    display: inline-flex;
    position: relative;
    vertical-align: middle;
  }
  .b5-icon {
    width: 1em;
    height: 1em;
    position: relative;
    fill: currentColor;
    vertical-align: -2px;
  }
</style>
